<template>
  <div class="panel-box">
    <PanelBoxTitle :image="image">{{ realTitle }}</PanelBoxTitle>
    <div class="panel-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import PanelBoxTitle from "./PanelBoxTitle";

export default {
  name: "PanelBox",

  components: {
    PanelBoxTitle,
  },

  props: {
    title: String,
    image: {
      type: String,
      default() {
        return "";
      },
    },
  },

  data() {
    return {
      // image: require("@/asset/image/panel-pic-one.png"),
    };
  },

  computed: {
    realTitle() {
      return this.title || this.$parent.$attrs.title;
    },
  },
};
</script>

<style lang="scss" scoped>
.panel-box {
  display: flex;
  flex-direction: column;
}
.panel-box-content {
  flex: 1;
  height: 100%;
}
</style>
